<template>
  <div v-loading="loading">
    <div class="info w-full bg-white">
      <div class="flex">
        <span class="info_tab">预警设置</span>
      </div>
      <div class="w-3/12 mt-6">
        <el-form ref="setRef" :model="form" label-width="160px">
          <el-form-item label="脉率过低预警值" prop="hrLow">
            <el-input-number v-model="form.hrLow" :min="30" :max="70" placeholder="暂未设置" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="脉率过高预警值" prop="hrHigh">
            <el-input-number v-model="form.hrHigh" :min="100" :max="200" placeholder="暂未设置" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="血氧过低预警值" prop="spo2">
            <el-input-number v-model="form.spo2" :min="80" :max="95" placeholder="暂未设置" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="体温过低预警值" prop="tempLow">
            <el-input-number v-model="form.tempLow" :min="24" :max="35" :precision="1" placeholder="暂未设置" style="width: 100%;" />
          </el-form-item>
          <el-form-item label="体温过高预警值" prop="tempHigh">
            <el-input-number v-model="form.tempHigh" :min="37" :max="39" :precision="1" placeholder="暂未设置" style="width: 100%;" />
          </el-form-item>
        </el-form>

        <div style="text-align: right;">
          <el-button type="primary" @click="submitForm(setRef)" style="">确 定</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {reactive, ref, toRefs} from 'vue'
import {ElMessage, FormInstance} from "element-plus";
import {getWarnValueSet, saveWarnValue} from "@/api/set";

/**表单 */
interface FromType {
  hrLow: NumUn
  hrHigh: NumUn
  spo2: NumUn //血氧
  tempLow: NumUn
  tempHigh: NumUn
}
interface DataType {
  form: FromType,
}
const data = reactive<DataType>({
  form: {
    hrLow: undefined,
    hrHigh: undefined,
    tempLow: undefined,
    tempHigh: undefined,
    spo2: undefined
  },
});
const {form} = toRefs(data)

// 查询预警设置
const loading = ref(false);
const getSpo2Set = () => {
  loading.value = true;
  getWarnValueSet().then((res: any) => {
    loading.value = false;
    if(res.data) {
      form.value = res.data;
    }
  })
}
getSpo2Set();

const setRef = ref<FormInstance>();
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) { return; }
  await formEl.validate((valid, fields) => {
    if (valid) {
      loading.value = true;
      saveWarnValue(form.value).then(() => {
        loading.value = false;
        ElMessage.success('设置成功！');
      });
    } else {
      console.log('error submit!', fields)
    }
  })
}


</script>

<style scoped lang="less">

.info {
  height: 555px;
  border-radius: 4px;
  padding: 20px;

  .info_tab {
    width: 88px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 32px;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    letter-spacing: 0;
    cursor: pointer;
    //background: #fff;
    //color: #4e5969;

    background: #e8fff8;
    color: #00a991;
    transition: 0.8s;
  }
}

.el-input__wrapper {
  width: 100%;
  background-color: #f2f3f5;
}
</style>
